import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import { history } from 'umi';
import './index.css';

// 价值评估统计
export default function Index() {
  const init = () => {
    var myChart = echarts.init(document.getElementById('khfl'));
    myChart.setOption({
      title: {
        top: '10px',
        left: '30px',
        text: '客户数量',
        textStyle: {
          color: 'black',
          fontSize: '12px',
          fontWeight: 'normal',
        },
      },
      tooltip: {
        trigger: 'axis',
        show: true,
        axisPointer: {},
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'category',
        data: [
          '汽车制造商',
          '分销商',
          '加盟商',
          '零售商',
          '医院',
          '其它医疗机构',
          '医疗设备生产商',
          '土建工程公司',
          '安装工程公司',
          '工程设备贸易公司',
          '连锁商贸',
          '食品贸易公司',
          '代理商',
          '直接客户',
          '电子产品制造商',
          '视频生产公司',
        ],
        axisLabel: { interval: 0, rotate: 30 },
      },
      yAxis: {
        type: 'value',
      },
      // 缩放
      dataZoom: [
        {
          type: 'inside',
        },
      ],
      series: [
        {
          // name: '客户数量1111',
          label: {
            show: true,
            position: 'top',
          },
          data: [
            {
              value: 15,
              itemStyle: { color: '#26c0c0' },
            },
            {
              value: 5,
              itemStyle: { color: '#b5c334' },
            },
            {
              value: 22,
              itemStyle: { color: '#fcce10' },
            },
            {
              value: 13,
              itemStyle: { color: '#e87c25' },
            },
            {
              value: 8,
              itemStyle: { color: '#27727b' },
            },
            {
              value: 5,
              itemStyle: { color: '#fe8463' },
            },
            {
              value: 6,
              itemStyle: { color: '#9bca63' },
            },
            {
              value: 21,
              itemStyle: { color: '#fad86' },
            },
            {
              value: 14,
              itemStyle: { color: '#f3a43b' },
            },
            {
              value: 12,
              itemStyle: { color: '#60c0dd' },
            },
            {
              value: 13,
              itemStyle: { color: '#d7504b' },
            },
            {
              value: 10,
              itemStyle: { color: '#c6e579' },
            },
            {
              value: 8,
              itemStyle: { color: '#f4e001' },
            },
            {
              value: 8,
              itemStyle: { color: '#f0805a' },
            },
            {
              value: 10,
              itemStyle: { color: '#c1232b' },
            },
            {
              value: 8,
              itemStyle: { color: '#c0392b' },
            },
          ],
          type: 'bar',
          // barWidth: '30%',
        },
      ],
    });
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <div
      className="customer"
      style={{ backgroundColor: 'white', width: '48%', height: '402px' }}
    >
      <div className="customertitle">
        <span>客户分类统计</span>
        <img
          src=""
          alt=""
          onClick={() => {
            history.push('/home/khfl');
          }}
        />
      </div>
      <div id="khfl" style={{ height: '363px' }}></div>
    </div>
  );
}
